<!--
 * @Author: zhangyonggui
 * @Date: 2023-11-16 19:38:29
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2024-01-23 16:41:04
 * @Descripttion:
-->
<template>
  <el-dialog
    title="下载导出"
    v-model="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
    width="400px"
    top="40vh"
  >
    <div class="dialog-body">
      确认要导出已选择的 {{ assetCount }} 条资产数据吗？
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button type="primary" size="small" :loading="loading" @click="confirm"
        >确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup> 
import {defineProps,defineEmits, ref,watch} from 'vue';
import {useStore} from 'vuex';
import {ElMessage} from 'element-plus';
const store=useStore() 
import moment from 'moment';
const emit=defineEmits(['update:isShow'])
const props=defineProps({
  isShow: {
      type: Boolean,
      default: false,
    },
    assetCount: {
      type: Number,
      default: 0,
    },
    selectType: {
      type: Number,
      default: 0,
    },
    searchData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    assetIds: {
      type: Array,
      default: () => [],
    },
})
const visible=ref(props.isShow);
const loading=ref(false);

watch(()=>props.isShow,(newValue,oldValue)=>{
  emit('update:isShow', newValue)
})
const cancel=()=> {
      visible.value = false
    }
    const confirm=async()=> {
      loading.value = true
      const params = {
        assetIds: props.assetIds,
        selectType: props.selectType,
        assetType: props.searchData.searchType,
        condition: props.searchData.searchCondition,
        orderCondition: props.searchData.orderCondition,
        holdingRatio: props.searchData.holdingRatio,
      }
      const { code, data } = await store.dispatch(
        'api/dataExport',
        params
      )
      loading.value = false
      if (code !== 0) {
        return
      }

      const assetType = props.searchData.searchType
      const time = moment().format('YYYYMMDDHHmmss')
      const fileName = `${assetType}${time}.xlsx`
      const substring = data.substring(4)
      const res = `${window.location.origin}/${substring}`
      downLoadFile(res, fileName)
      ElMessage.success('正在导出')
      cancel()
    }
    // 文件下载
    // content: 后台返回的文件流， fileName： 文件名
   const downLoadFile=(content, fileName)=> {
      const blob = new Blob([content])
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        // elink.download = fileName
        elink.style.display = 'none'
        elink.href = content
        document.body.appendChild(elink)
        elink.click()
        // URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        (navigator as any).msSaveBlob(blob, fileName)
      }
    }
</script>
<style lang="scss" scoped>
</style>
